<template>
  <el-pagination
    v-if="tableConfig.total > 0"
    v-model:current-page="tableConfig.page"
    v-model:page-size="tableConfig.pageSize"
    :page-sizes="[10, 20, 30]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="tableConfig.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script setup>
defineProps({
  tableConfig: {
    type: Object,
    defalut: () => {},
  },
});
const emit = defineEmits(['sizeChange', 'currentChange']);
const handleSizeChange = (val) => {
  emit('sizeChange', val);
};
const handleCurrentChange = (val) => {
  emit('currentChange', val);
};
</script>
<style lang="scss" scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
